<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>景区资讯</title>
    <link rel="stylesheet" type="text/css" href="css/zixun.css"/>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>

<body>
<div id="app">
    <div>
        <iframe scrolling="no" frameborder="0" src="../head/head.html" width="100%" height="27"></iframe>
    </div>
    <div class="top">
        <iframe scrolling="no" src="../top/top.html" frameborder="0" width="100%" height="110"></iframe>
    </div>
    <div class="menu">
        <iframe scrolling="no" src="../daohang/meizu.html" frameborder="0" width="100%" height="50"></iframe>
    </div>
    <div class="container">
        <div class="bgcolor_white">
            <div class="cur_position">您的位置：<a href="/html/front/home.html">首页</a> &gt;&nbsp;&nbsp;旅游资讯</div>
            <div class="yd_1200">
                <div class="yd_right">
                    <div class="zx_fenlei">
                        <span>旅游资讯</span>
                        <ul>
                            <li class="current_on" v-for="(item,index) in informationList"><a
                                    @click="cut(item.code,pageNo)">{{item.name}}</a></li>
                        </ul>
                    </div>

                </div>
                <div class="scenery_list ">
                    <div class="hot_jq">
                        <div class="px_page">
                            <span>{{pageNo}}/{{navigateLastPage}}</span>
                            <a href="#" @click="check1(code,pageNo)">&lt;&lt;</a><a href="#"  @click="check2(code,pageNo)">&gt;&gt;</a>
                        </div>
                        旅游资讯
                    </div>
                    <div class="zixun_list">
                        <ul>
                            <li v-for="(item,index) in listPage">
                                <span>出行日期：{{item.publishtime}}  作者：{{item.source}}</span><a href="zx_content.html"
                                                                                             target="_blank">{{item.title}}</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="yd_1200">
                <iframe scrolling="no" width="1200" height="262" frameborder="0"
                        src="zhoubiantuijian/zhoubian.html"></iframe>
            </div>

            <div class="footer">
                <iframe scrolling="no" src="../footer/foot.html" frameborder="0" width="1200" height="120"
                        _height="120"></iframe>
            </div>
        </div>
    </div>
</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                checkUser: {},//获取的用户信息
                informationList: [],//资讯列表
                listPage: [],//右边的列表
                pageNo: "",//第几页
                navigateLastPage: "",//总共多少页
                channelId: "",//记录当前id
            }
        },
        //钩子
        created: function () {
            this.queryAll();
        },
        //方法
        methods: {
            //初始化数组
            queryAll() {
                let a = {
                    "pageNo": "1",
                    "pageSize": "7",
                    "data": {}
                };
                let _this = this;
                //axios向后台发请求
                axios.post('/channel/queryPage', a)
                    .then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 200) {
                            _this.informationList = response.data.data.list;
                            /*alert(_this.informationList),*/
                            /*console.log(_this.informationList),*/
                            //默认第一个索引
                            _this.pageNo = 1,
                                _this.cut(_this.informationList[0].code, _this.pageNo),
                                _this.channelId = _this.informationList[0].code
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //点击事件
            home() {
                top.location.href = "http://localhost:8083/html/front/indexshiyan.html"
            },
            //切换分页
            cut(index, PageNo) {
                this.id = index;
        //alert(index+"暗示")

                let a = {
                    "pageNo": PageNo,
                    "pageSize": "10",
                    "data": {
                        "channelId": index
                    }
                };
                /*alert(index);*/
                let _this = this;
                //axios向后台发请求
                axios.post('/news/queryByPage', a)
                    .then(function (response) {
                        console.log(response.data);
                        if (response.data.code == 200) {
                            _this.listPage = response.data.data.list;
                            console.log(_this.listPage),
                                //总页数
                                _this.navigateLastPage = response.data.data.navigateLastPage,
                                //当前页数
                                _this.pageNo = response.data.data.navigateFirstPage
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            //加页
            check2(index, PageNo) {
                PageNo = PageNo + 1;
                if (PageNo > this.navigateLastPage) {
                    this.pageNo = 1;
                } else {
                    this.pageNo = PageNo;
                }
                this.cut(index, this.pageNo)
            },
            //减页
            check1(index, PageNo) {
                PageNo = PageNo - 1;
                if (PageNo < 1) {
                    this.pageNo = this.navigateLastPage;
                } else {
                    this.pageNo = PageNo;
                }
                this.cut(index, this.pageNo)
            },


        },


    })


</script>


</body>
</html>
